<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>边框渐变的拱形</title>
        <style>

            .border1{
                width: 200px;
                height: 200px;
                margin:100px auto;

              position: relative;
                border: 1px solid transparent;
                border-radius: 200px;
                background: white;
                background-clip: padding-box;
                padding: 10px;
            }
            .border1::after{

                position: absolute;
                top: -40px;
                bottom: -40px;
                left: -40px;
                 right: -40px;
                background: linear-gradient(to right,red, blue);
                content: '';
                z-index: -1;
                border-radius: 200px;
            }

        </style>
    </head>
    <body>

        <div class="border1"></div>

    </body>
</html>